<template>
<div id="roleEdit">
    <Modal v-model="role.roleEditModalSta" title="编辑用户" :loading="loading" @on-ok="roleEditOk" @on-cancel="roleEditCancel">
        <Row>
            <Col :span="20">
            <Form ref="roleEditForm" :model="role.roleOneSta" :rules="roleEditRule" label-position="right" :label-width="100">
                <FormItem label="用户ID" prop="id">
                    <Input v-model="role.roleOneSta.id" disabled></Input>
                </FormItem>
                <FormItem label="角色名称" prop="name">
                    <Input v-model="role.roleOneSta.name"></Input>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Form,
    FormItem,
    Input,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations
} from 'vuex'
export default {
    name: 'RoleEdit',
    data() {
        return {
            loading: true,
            //表单验证规则
            roleEditRule: {
                id: {
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                name: {
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }
            }
        };
    },
    created() {},
    mounted() {},
    computed: {
        ...mapState({
            role: state => state.role //vuex角色
        })
    },
    methods: {
        ...mapMutations([
            'roleEditModalMut', //编辑角色模态框
            'roleListUpdateOneMut', //更新角色列表数据
            'roleOneMut' //清空当前选中的角色
        ]),
        //提交
        roleEditOk() {
            let _self = this;
            this.$refs['roleEditForm'].validate((valid) => {
                if (valid) {
                    setTimeout(() => {
                        let obj = this.$qs.stringify({
                            id: this.role.roleOneSta.id,
                            name: this.role.roleOneSta.name,
                            crtime: this.role.roleOneSta.crtime,
                            chtime: new Date()
                        });
                        //根据用户id获取用户角色
                        this.$axios.post('/acl_role/updateRole', obj).then(res => {
                            if (res.data) {
                                _self.roleListUpdateOneMut({
                                    state: res.data
                                }); //更新角色列表数据
                                _self.roleOneMut({
                                    state: {}
                                }); //清空当前选中的角色
                                _self.roleEditModalMut({
                                    state: false
                                }); //关闭模态框
                            }
                        });
                    }, 1000);
                } else {
                    //动画
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    });
                }
            })
        },
        //取消
        roleEditCancel() {
            this.roleOneMut({
                state: {}
            }); //清空当前选中的角色
        }
    },
    components: {
        Modal,
        Row,
        Col,
        Form,
        FormItem,
        Input,
        Message
    }
}
</script>
